<!--suppress ALL -->
<template>
  <!--修改属性值-->
  <el-dialog
    title="修改属性值"
    :visible.sync="propDiaLog.show"
    width="713px"
    class="dialog dialog-kind"
    :before-close="closePropDialog"
  >
    <div class="amending">
      <el-form ref="form" label-width="auto">
        <el-form-item id="main-category-select" label="主 分 类:">
          <el-select v-model="ruleForm.mainCategoryVal" placeholder="请选择主分类" value-key="id">
            <el-option
              v-for="item in mainCategoryList"
              :key="item.id"
              :label="item.categoryName"
              :value="item"
            >
              <span v-if="item.noDisable">{{ item.categoryName }}</span>
              <span v-else style="color: #C0C4CC">{{ item.categoryName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item id="sub-category-select" label="子 分 类:">
          <el-select v-model="ruleForm.subCategoryVal" value-key="id" placeholder="请选择子分类" @visible-change="subCategoryItemShow">
            <el-option
              v-for="item in subCategoryList"
              :key="item.id"
              :label="item.categoryName"
              :value="item"
            >
              <span v-if="item.noDisable">{{ item.categoryName }}</span>
              <span v-else style="color: #C0C4CC">{{ item.categoryName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.subCategoryVal.id && ruleForm.subCategoryVal.standardProa" id="category-prop-select1" :label="`${ruleForm.subCategoryVal.standardProa }：`">
          <el-select v-model="ruleForm.attributeVal[0]" :loading="attributeLoading[0]" placeholder="请选择属性" value-key="id" @visible-change="cateProp1ItemShow">
            <el-option
              v-for="item in sortItem(attributeInfo.filter(temp => temp.propType === (1)), false)"
              :key="item.id"
              :label="item.propValue"
              :value="item"
            >
              <span v-if="item.noDisable">{{ item.propValue }}</span>
              <span v-else style="color: #C0C4CC">{{ item.propValue }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.subCategoryVal.id && ruleForm.subCategoryVal.standardProb" id="category-prop-select2" :label="`${ruleForm.subCategoryVal.standardProb }：`">
          <el-select v-model="ruleForm.attributeVal[1]" :loading="attributeLoading[1]" placeholder="请选择属性" value-key="id" @visible-change="cateProp2ItemShow">
            <el-option
              v-for="item in sortItem(attributeInfo.filter(temp => temp.propType === (2)), false)"
              :key="item.id"
              :label="item.propValue"
              :value="item"
            >
              <span v-if="item.noDisable">{{ item.propValue }}</span>
              <span v-else style="color: #C0C4CC">{{ item.propValue }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.subCategoryVal.id && ruleForm.subCategoryVal.standardProc" id="category-prop-select3" :label="`${ruleForm.subCategoryVal.standardProc }：`">
          <el-select v-model="ruleForm.attributeVal[2]" :loading="attributeLoading[2]" placeholder="请选择属性" value-key="id" @visible-change="cateProp3ItemShow">
            <el-option
              v-for="item in sortItem(attributeInfo.filter(temp => temp.propType === (3)), false)"
              :key="item.id"
              :label="item.propValue"
              :value="item"
            >
              <span v-if="item.noDisable">{{ item.propValue }}</span>
              <span v-else style="color: #C0C4CC">{{ item.propValue }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.subCategoryVal.id && ruleForm.subCategoryVal.standardProd" id="category-prop-select4" :label="`${ruleForm.subCategoryVal.standardProd }：`">
          <el-select v-model="ruleForm.attributeVal[3]" :loading="attributeLoading[3]" placeholder="请选择属性" value-key="id" @visible-change="cateProp4ItemShow">
            <el-option
              v-for="item in sortItem(attributeInfo.filter(temp => temp.propType === (4)), false)"
              :key="item.id"
              :label="item.propValue"
              :value="item"
            >
              <span v-if="item.noDisable">{{ item.propValue }}</span>
              <span v-else style="color: #C0C4CC">{{ item.propValue }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.subCategoryVal.id && ruleForm.subCategoryVal.standardProe" id="category-prop-select5" :label="`${ruleForm.subCategoryVal.standardProe }：`">
          <el-select v-model="ruleForm.attributeVal[4]" :loading="attributeLoading[4]" placeholder="请选择属性" value-key="id" @visible-change="cateProp5ItemShow">
            <el-option
              v-for="item in sortItem(attributeInfo.filter(temp => temp.propType === (5)), false)"
              :key="item.id"
              :label="item.propValue"
              :value="item"
            >
              <span v-if="item.noDisable">{{ item.propValue }}</span>
              <span v-else style="color: #C0C4CC">{{ item.propValue }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitPropDialog">确 定</el-button>
      <el-button @click="closePropDialog">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { toProductList } from '@/js/product'
import { loadMainCategory, loadsubCategory, loadAttribute, loadPropValExistSpu } from '@/api/search/index'
export default {
  name: 'PropDialog',
  props: {
    propDiaLog: {
      type: Object,
      required: true
    },
    urlData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      mainCategoryList: [], // 主分类列表
      isFirst: [true, true], // [首次加载子分类，首次加载关键属性列表]
      subCategoryList: [], // 子分类列表
      attributeInfo: [], // 关键属性列表
      attributeLoading: [true, true, true, true, true], // 关键属性下拉框打开时的标志
      ruleForm: {
        mainCategoryVal: {}, // 已选的主分类值
        subCategoryVal: {}, // 已选的子分类值
        attributeVal: [{}, {}, {}, {}, {}], // 所选属性值的id
        address: {} // 地址
      }
    }
  },
  watch: {
    // 动态加载子分类
    'ruleForm.mainCategoryVal': {
      handler: function(newVal) {
        this.ruleForm.subCategoryVal = {}
        this.ruleForm.attributeVal = [{}, {}, {}, {}, {}]
        this.attributeInfo = []
        this.subCategoryList = []
        if (newVal.id) {
          const lat = this.ruleForm.address.latitude
          const lng = this.ruleForm.address.longitude
          const mainCategoryId = newVal.id
          loadsubCategory({ mainCategoryId, lng, lat }).then(res => {
            if (res.data && res.data.existIds && res.data.existIds.length > 0) {
              res.data.list.forEach(temp => {
                temp.noDisable = res.data.existIds.includes(temp.id)
              })
            } else {
              res.data.list.forEach(temp => { temp.noDisable = false })
            }
            this.subCategoryList = this.sortItem(res.data.list, true)
            if (this.isFirst[0] && this.urlData.childCategory) {
              this.isFirst[0] = false
              const selected = res.data.list.filter(temp => temp.id === this.urlData.childCategory.id)
              this.ruleForm.subCategoryVal = selected && selected.length > 0 ? selected[0] : {}
            }
          })
        }
      }
    },
    // 动态加载属性
    'ruleForm.subCategoryVal': {
      handler: function(newVal) {
        this.ruleForm.attributeVal = [{}, {}, {}, {}, {}]
        if (newVal.id) {
          loadAttribute(newVal.id).then(res => {
            this.attributeInfo = res.data
            if (this.isFirst[1]) {
              this.isFirst[1] = false
              let temp = this.attributeInfo.filter(temp => temp.propType === (1) && temp.id === this.urlData.proaId)
              if (temp.length > 0) {
                this.ruleForm.attributeVal[0] = temp[0]
              }
              temp = this.attributeInfo.filter(temp => temp.propType === (2) && temp.id === this.urlData.probId)
              if (temp.length > 0) {
                this.ruleForm.attributeVal[1] = temp[0]
              }
              temp = this.attributeInfo.filter(temp => temp.propType === (3) && temp.id === this.urlData.procId)
              if (temp.length > 0) {
                this.ruleForm.attributeVal[2] = temp[0]
              }
              temp = this.attributeInfo.filter(temp => temp.propType === (4) && temp.id === this.urlData.prodId)
              if (temp.length > 0) {
                this.ruleForm.attributeVal[3] = temp[0]
              }
              temp = this.attributeInfo.filter(temp => temp.propType === (5) && temp.id === this.urlData.proeId)
              if (temp.length > 0) {
                this.ruleForm.attributeVal[4] = temp[0]
              }
            }
          })
        } else {
          this.attributeInfo = []
        }
      }
    }
  },
  created() {
    this.ruleForm.address = JSON.parse(JSON.stringify(this.urlData.address))
    this.getMainCate()
  }, methods: {
    // 是否展现子分类下拉框
    subCategoryItemShow(flag) {
      const lat = this.ruleForm.address.latitude
      const lng = this.ruleForm.address.longitude
      if (flag) {
        if (!lat || !lng) {
          document.getElementById('sub-category-select').getElementsByClassName('el-select')[0].click()
          this.$message.error('请先选择收货地址!')
        } else if (!this.ruleForm.mainCategoryVal.id) {
          document.getElementById('sub-category-select').getElementsByClassName('el-select')[0].click()
          this.$message.error('请先选择主分类!')
        }
      }
    },
    // 是否展现属性值1下拉框
    cateProp1ItemShow(flag) {
      this.catePropItemShow(0, flag)
    },
    // 是否展现属性值2下拉框
    cateProp2ItemShow(flag) {
      this.catePropItemShow(1, flag)
    },
    // 是否展现属性值3下拉框
    cateProp3ItemShow(flag) {
      this.catePropItemShow(2, flag)
    },
    // 是否展现属性值4下拉框
    cateProp4ItemShow(flag) {
      this.catePropItemShow(3, flag)
    },
    // 是否展现属性值5下拉框
    cateProp5ItemShow(flag) {
      this.catePropItemShow(4, flag)
    },
    // 加载属性值
    catePropItemShow(index, flag) {
      const lat = this.ruleForm.address.latitude
      const lng = this.ruleForm.address.longitude
      if (flag) {
        this.$set(this.attributeLoading, index, true)
        if (!lat || !lng) {
          document.getElementById(`category-prop-select${index + 1}`).getElementsByClassName('el-select')[0].click()
          this.$message.error('请先选择收货地址!')
        } else {
          const proaId = this.ruleForm.attributeVal[0].id
          const probId = this.ruleForm.attributeVal[1].id
          const procId = this.ruleForm.attributeVal[2].id
          const prodId = this.ruleForm.attributeVal[3].id
          const proeId = this.ruleForm.attributeVal[4].id
          const mainCategoryId = this.ruleForm.mainCategoryVal.id
          const childCategoryId = this.ruleForm.subCategoryVal.id
          loadPropValExistSpu(index + 1, { mainCategoryId, childCategoryId, lng, lat, proaId, probId, procId, prodId, proeId }).then(res => {
            const data = this.attributeInfo.filter(temp => temp.propType === (index + 1))
            if (res.data) {
              data.forEach(temp => {
                temp.noDisable = res.data.includes(temp.id)
              })
            }
            let temp = {}
            if (this.ruleForm.attributeVal[index].id) {
              temp = data.filter(temp => temp.id === this.ruleForm.attributeVal[index].id)
              temp = temp.length > 0 ? temp[0] : {}
            }
            this.ruleForm.attributeVal.splice(index, 1, temp)
          }).finally(() => {
            this.$set(this.attributeLoading, index, false)
          })
        }
      }
    },
    // 获取主分类列表
    getMainCate() {
      const lat = this.ruleForm.address.latitude
      const lng = this.ruleForm.address.longitude
      loadMainCategory({ lat, lng }).then(res => {
        if (res.data && res.data.existIds && res.data.existIds.length > 0) {
          res.data.list.forEach(temp => {
            temp.noDisable = res.data.existIds.includes(temp.id)
          })
        } else {
          res.data.list.forEach(temp => { temp.noDisable = false })
        }
        this.mainCategoryList = this.sortItem(res.data.list, true)
        if (this.urlData.mainCategory) {
          const selected = res.data.list.filter(temp => temp.id === this.urlData.mainCategory.id)
          this.ruleForm.mainCategoryVal = selected && selected.length > 0 ? JSON.parse(JSON.stringify(selected[0])) : {}
        }
      })
    },
    // 选择项排序
    sortItem(array, isFlag) {
      array = isFlag ? array : JSON.parse(JSON.stringify(array))
      array.sort((a, b) => {
        return (a.noDisable ? 0 : 1) - (b.noDisable ? 0 : 1)
      })
      return array
    },
    // 提交
    submitPropDialog() {
      if (!this.ruleForm.mainCategoryVal.id) {
        this.$message.error('请选择主分类')
        return
      } else if (!this.ruleForm.subCategoryVal.id) {
        this.$message.error('请选择子分类')
        return
      } else {
        const subCategoryVal = this.ruleForm.subCategoryVal
        const attributeVal = this.ruleForm.attributeVal
        if (subCategoryVal.standardProa && !attributeVal[0].id) {
          this.$message.error(`请选择${subCategoryVal.standardProa}`)
          return
        } else if (subCategoryVal.standardProb && !attributeVal[1].id) {
          this.$message.error(`请选择${subCategoryVal.standardProb}`)
          return
        } else if (subCategoryVal.standardProc && !attributeVal[2].id) {
          this.$message.error(`请选择${subCategoryVal.standardProc}`)
          return
        } else if (subCategoryVal.standardProd && !attributeVal[3].id) {
          this.$message.error(`请选择${subCategoryVal.standardProd}`)
          return
        } else if (subCategoryVal.standardProe && !attributeVal[4].id) {
          this.$message.error(`请选择${subCategoryVal.standardProe}`)
          return
        }
      }
      this.closePropDialog()
      this.urlData.childCategory = this.ruleForm.subCategoryVal
      this.urlData.mainCategory = this.ruleForm.mainCategoryVal
      if (this.ruleForm.attributeVal[0] && Object.keys(this.ruleForm.attributeVal[0]).length > 0) {
        this.urlData.proaId = this.ruleForm.attributeVal[0].id
        this.urlData.info.proa = this.ruleForm.attributeVal[0].propValue
      }
      if (this.ruleForm.attributeVal[1] && Object.keys(this.ruleForm.attributeVal[1]).length > 0) {
        this.urlData.probId = this.ruleForm.attributeVal[1].id
        this.urlData.info.prob = this.ruleForm.attributeVal[1].propValue
      }
      if (this.ruleForm.attributeVal[2] && Object.keys(this.ruleForm.attributeVal[2]).length > 0) {
        this.urlData.procId = this.ruleForm.attributeVal[2].id
        this.urlData.info.proc = this.ruleForm.attributeVal[2].propValue
      }
      if (this.ruleForm.attributeVal[3] && Object.keys(this.ruleForm.attributeVal[3]).length > 0) {
        this.urlData.prodId = this.ruleForm.attributeVal[3].id
        this.urlData.info.prod = this.ruleForm.attributeVal[3].propValue
      }
      if (this.ruleForm.attributeVal[4] && Object.keys(this.ruleForm.attributeVal[4]).length > 0) {
        this.urlData.proeId = this.ruleForm.attributeVal[4].id
        this.urlData.info.proe = this.ruleForm.attributeVal[4].propValue
      }
      this.$emit('submitDialog')
    },
    // 关闭属性弹出框
    closePropDialog() {
      this.propDiaLog.show = false
    }
  }
}
</script>
<style lang='scss' scoped >
  /deep/ .search-box {
    .el-form-item__label {
      width: 106px !important;
    }
  }
  /deep/.site-input {
    .el-input {
      width: 230px;
    }
  }
  /deep/ .range {
    .el-input {
      width: 74px;
    }
  }
  /deep/ .num {
    .el-input-number {
      width: 134px;
    }
  }
  /deep/ .range-box {
    .el-input {
      width: 126px;
    }
  }
  /deep/ .purchase {
    .el-input {
      width: 126px;
    }
  }
  /deep/ .dialog {
    .el-dialog__footer {
      display: flex;
      justify-content: center;
      .el-button--primary {
        width: 110px;
        height: 37px;
        background: #ff3b30;
        color: #ffffff;
        border: none;
      }
      .el-button--default {
        width: 110px;
        height: 37px;
        border: 1px solid #e5e5e5;
        background: #e5e5e5;
        color: #6b6b6b;
      }
    }
  }
  /deep/ .amending {
    display: flex;
    justify-content: center;
    padding-right: 91px;
    .el-input {
      width: 236px;
    }
  }
</style>
